<div id="date-popup" class="hidden">
    <div id="date-popup-inner">
        <div id="date-popup-inner-header">
            <img id="close-popup" src="/adminarea/img/icon.png">
        </div>
        <div id="date-popup-content">
            <p>Укажите период</p>
            <ul id="popup-tabs-head">
                <li>
                    <span id="tab-range-week">Неделя</span>
                </li>
                <li class="active-tab-item">
                    <span id="tab-range-month">Месяц</span>
                </li>
                <li>
                    <span id="tab-range-quartal">Квартал</span>
                </li>
                <li>
                    <span id="tab-range-year">Год</span>
                </li>	
            </ul>
            <ul id="popup-tabs-contents">
                <li>
                    <div class="hidden tab-range-week">
                        <input type="text" class="text-field" name="start-range" value="17.03.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="active-tab-item tab-range-month">
                        <input type="text" class="text-field" name="start-range" value="24.02.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="hidden tab-range-quartal">
                        <input type="text" class="text-field" name="start-range" value="24.12.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="hidden tab-range-year">
                        <input type="text" class="text-field" name="start-range" value="24.03.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
        <div id="date-popup-inner-footer">
            <button id="date-range-selector" class="single-button">Выбрать</button>
        </div>
    </div>
</div>
<h1>Пользователи системы</h1>
<p>На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее. На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее.</p>
<div id="content-inner">
    <form enctype="multipart/form-data" action="" method="get" name="admin-area-users-form">
        <div id="content-inner-top">
            <span class="in-row">Показать</span>
            <div class="select-style w126px to-left">
                <select name="promocode-id" class="select-styled w146px">
                    <option selected disabled>Промокод</option>
                    <option value="5465">5465</option>
                    <option value="2465">2465</option>
                    <option value="2794">2794</option>								
                </select>														
            </div>						
            <span class="in-row">за период</span>
            <div class="field-outer">
                <img src="/adminarea/img/icon.png"><input type="button" class="single-button calendar-button" value="24.02.2013 — 24.03.2014"><input id="range-text" type="text" name="range" value="24.02.2013 — 24.03.2014" class="hidden">
            </div>
            <span class="in-row">и сгруппировать по</span>
            <div class="select-style w106px to-left">
                <select name="group-by" class="select-styled w126px">
                    <option value="days">Дням</option>
                    <option value="weeks">Неделям</option>
                    <option value="months" selected>Месяцам</option>
                </select>														
            </div>
        </div>
        <div class="clear"></div>
        <div id="chartdiv"></div>

        <table class="admin-area-table">
            <thead>
                <tr>
                    <th><div class="title mid-cell"><p>Промокод</p></div></th>
            <th><div class="title mid-cell"><p>Эвакуаторов</p></div></th>
            <th><div class="title mid-cell"><p>Фамилия</p></div></th>
            <th><div class="title mid-cell"><p>Регистрация</p></div></th>
            <th><div class="title mid-cell"><p>E-mail пользователя</p></div></th>
            <th><div class="title"><img class="eye-action-head" src="/adminarea/img/icon.png"></div></th>
            </tr>					
            </thead>
            <tbody>
                <?php foreach ($models as $news): ?>
                    <tr id="table-row-<?php echo $news['user_id']; ?>">								
                        <td><div class="cell mid-cell"><p class="promocode-id"><?php echo $news->code->title; ?></p></div></td>
                        <td><div class="cell short-cell"><p>1</p></div></td>
                        <td><div class="cell mid-cell"><p><?php echo $news['user_lname']; ?></p></div></td>
                        <td><div class="cell mid-cell"><p><?php echo date('d.m.Y', $news['user_registered']); ?></p></div></td>
                        <td><div class="cell mid-cell"><p><?php echo $news['user_email']; ?></p></div></td>
                        <td><div class="cell"><img class="eye-action" src="/adminarea/img/icon.png"></div></td>
                    </tr>
                    <tr class="table-row-<?php echo $news['user_id']; ?> hidden">
                        <td colspan="6">
                            <div class="extended-row-inner row-full-length">
                                <div class="extended-row-inner-content">
                                    <div>	
                                        <p>Телефон: <?php echo $news['user_phone']; ?></p>
                                    </div>
                                    <div>
                                        <p>Пароль: <?php echo $news['user_password']; ?></p>
                                    </div>
                                    <div>
                                        <p>Имя: <?php echo $news['user_fname']; ?></p>
                                    </div>
                                </div>
                                <div class="extended-row-inner-footer">
                                    <?php echo CHtml::link('Удалить', array('delete', 'id'=>$news['user_id']), array('class'=>'single-button', 'confirm' => 'Точно удалить?')); ?>
                                    <!--<a class="single-button" href="/manage?id=5465">Удалить</a>-->
                                </div>
                            </div>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

    </form>
</div>
<nav class="page-navi">
    <?php
    $this->widget('CLinkPager', array(
        'pages' => $pages,
        'header' => '',
        'firstPageLabel' => '&lt;&lt;',
        'prevPageLabel' => 'Предыдущая страница',
        'nextPageLabel' => 'Следующая страница',
        'lastPageLabel' => '&gt;&gt;',
    ));
    ?>
</nav>











<script type="text/javascript">
    $(function() {
        $("img.eye-action").on('click',function() {
            var a = $(this).parents('tr');
            var b = a.attr("id");
            var c = a.parent();
            var d = c.find("tr." + b);
            if (d.is(".hidden")) {
                resetTableView();
                d.removeClass("hidden");
                d.addClass("extracted");
                a.addClass("extracted");
            } else {
                d.addClass("hidden");
                d.removeClass("extracted");
                a.removeClass("extracted");
            }
        });
    });
</script>




<script type="text/javascript">
    function handleHeight() {
        var h = $(document).height();
        var h1 = $("#left-sidebar").height();
        h = h - 40;
        h1 = h1 - 40;
        if (h <= h1) {
            $("#main-content").css("height", h1);
        } else
        {
            $("#main-content").css("height", "100%");
        }
    }
</script>	
<script type="text/javascript">
    $(function() {
        $("#no-js-warning").addClass("hidden");
        handleHeight();
        var n = navigator.appVersion;
        var p = n.indexOf("WebKit");
        if (p >= 0) {
            $("div.select-style").addClass("webkiteng");
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).resize(function() {
            handleHeight();
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).keydown(function() {
            handleHeight();
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).click(function() {
            handleHeight();
        });
    });
</script>
<script>
    $(function() {
        var a = $("span.unread-items-count-text");
        var b = a.parent();
        var c = a.text();
        if ($.trim(c) == "0") {
            b.addClass("hidden");
        } else {
            if ($.trim(c) == "") {
                b.addClass("hidden");
            }
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#admin-area-sidebar-nav li a").hover(function() {
            var a = $(this).find("img");
            var b = a.attr("class");
            var c = b + "-hovered";
            a.removeClass(b);
            a.addClass(c);
        }, function() {
            var a = $(this).find("img");
            var b = a.attr("class");
            var c = b.replace("-hovered", "");
            a.removeClass(b);
            a.addClass(c);
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select").focus(function() {
            var a = $(this).parent();
            a.addClass("select-focused");
        });
        $("select").focusout(function() {
            var a = $(this).parent();
            a.removeClass("select-focused");
        });
    });
</script>
<script type="text/javascript">
    AmCharts.monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
    AmCharts.shortMonthNames = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
    AmCharts.dayNames = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
    AmCharts.shortDayNames = ['Пон', 'Вт', 'Ср', 'Чет', 'Пят', 'Суб', 'Вос'];
    var chart;
    var chartData = [{
            date: "01.03.2014",
            cost: "5.0"
        }, {
            date: "02.03.2014",
            cost: "22.0"
        }, {
            date: "03.03.2014",
            cost: "32.5"
        }, {
            date: "04.03.2014",
            cost: "15"
        }, {
            date: "05.03.2014",
            cost: "10.2"
        }, {
            date: "06.03.2014",
            cost: "21.5"
        }, {
            date: "07.03.2014",
            cost: "24.2"
        }, {
            date: "08.03.2014",
            cost: "20.5"
        }, {
            date: "09.03.2014",
            cost: "10.33"
        }, {
            date: "10.03.2014",
            cost: "40.3"
        }];

    // this method is called when chart is first inited as we listen for "dataUpdated" event
    function zoomChart() {
        // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
        //chart.zoomToIndexes(0, chart.dataProvider.length);
    }

    // create chart
    AmCharts.ready(function() {

        // SERIAL CHART    
        chart = new AmCharts.AmSerialChart();

        chart.marginTop = 0;
        chart.marginLeft = 0;
        chart.autoMarginOffset = 0;
        chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
        chart.zoomOutButton = {
            backgroundColor: '#000000',
            backgroundAlpha: 0.15
        };
        chart.dataDateFormat = "DD.MM.YYYY";
        chart.dataProvider = chartData;
        chart.categoryField = "date";

        // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
        chart.addListener("dataUpdated", zoomChart);

        // AXES
        // category                
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
        categoryAxis.dashLength = 1;
        categoryAxis.gridAlpha = 0.15;
        //categoryAxis.axisColor = "#DADADA";
        categoryAxis.position = "top";
        categoryAxis.minorGridEnabled = true;


        // first value axis (on the left)
        var valueAxis1 = new AmCharts.ValueAxis();
        //valueAxis1.axisColor = "#FF6600";
        //valueAxis1.axisThickness = 0;
        //valueAxis1.gridAlpha = 0.15;	
        chart.addValueAxis(valueAxis1);

        // GRAPHS
        // first graph
        var graph1 = new AmCharts.AmGraph();
        graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
        graph1.title = "Промокод #5465";
        graph1.valueField = "cost";
        graph1.bullet = "round";
        graph1.hideBulletsCount = 10;
        graph1.bulletBorderAlpha = 1;
        graph1.bulletSize = 6;
        graph1.lineThickness = 2;
        graph1.bulletColor = "#FFF";
        graph1.bulletBorderColor = "#FFBA00";
        graph1.lineColor = "#FFBA00";
        graph1.balloonText = "$[[value]]";
        chart.addGraph(graph1);

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        chart.addChartCursor(chartCursor);

        // SCROLLBAR
        //var chartScrollbar = new AmCharts.ChartScrollbar();
        //chartScrollbar.scrollbarHeight = 25;
        //chart.addChartScrollbar(chartScrollbar);

        // LEGEND
        var legend = new AmCharts.AmLegend();
        legend.marginLeft = 0;
        legend.position = "bottom";
        legend.align = "center";
        legend.valueAlign = "left";
        chart.addLegend(legend);

        // WRITE
        chart.write("chartdiv");
    });
</script>
<script type="text/javascript">
    $(function() {
        $("input[type=button].calendar-button").click(function() {
            $("#date-popup").removeClass("hidden");
            var h = $(window).height();
            var w = $("#main-content").width();
            var h1 = $("#date-popup").height();
            var w1 = $("#date-popup").width();
            var a = $(window).width();
            if (a >= 980) {
                var w2 = $("#left-sidebar").width();
                w += 40;
                w2 += 40; //40-padding 20px
                $("#date-popup").css("top", h / 2 - h1 / 2);
                $("#date-popup").css("left", (w / 2 - w1 / 2) + w2);
            } else {
                $("#date-popup").css("top", h / 2 - h1 / 2);
                $("#date-popup").css("left", w / 2 - w1 / 2);
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select[name=promocode-id]").change(function() {
            var a = $("#range-text").val();
            if ($.trim(a) != "") {
                $("form[name=admin-area-users-form]").submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#date-range-selector").click(function() {
            var a = $("#popup-tabs-contents li div.active-tab-item input[name=start-range]");
            var b = $("#popup-tabs-contents li div.active-tab-item input[name=finish-range]");
            $("input.calendar-button").val(a.val() + " — " + b.val());
            $("#range-text").val(a.val() + " — " + b.val());
            $("#date-popup").addClass("hidden");
            var c = $("select[name=promocode-id]").find("option:selected").val();
            var d = $("select[name=promocode-id] option:first-child").val();
            if (c != d) {
                $("form[name=admin-area-users-form]").submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select[name=group-by]").change(function() {
            var a = $("#range-text").val();
            if ($.trim(a) != "") {
                var b = $("select[name=promocode-id]").find("option:selected").val();
                var c = $("select[name=promocode-id] option:first-child").val();
                if (b != c) {
                    $("form[name=admin-area-users-form]").submit();
                }
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#close-popup").click(function() {
            $("#date-popup").addClass("hidden");
        });
    });
</script>
<script type="text/javascript">
    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            var a = $("#date-popup").hasClass("hidden");
            if (a == false) {
                $("#date-popup").addClass("hidden");
            }
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#popup-tabs-head li").click(function() {
            $("#popup-tabs-head li").removeClass("active-tab-item");
            $(this).addClass("active-tab-item");
            $("#popup-tabs-contents li div").removeClass("hidden");
            $("#popup-tabs-contents li div").addClass("hidden");
            var a = $(this).find("span");
            var b = a.attr("id");
            var c = $("#popup-tabs-contents li div." + b);
            c.removeClass("hidden");
            $("#popup-tabs-contents li div").removeClass("active-tab-item");
            c.addClass("active-tab-item");
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("input[name=start-range]").keypress(function(e) {
            var ca = new Array(46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57);
            var c = !e.charCode ? e.which : e.charCode;
            if ($.inArray(c, ca) !== -1) {
            } else {
                e.preventDefault();
            }
        });
        $("input[name=finish-range]").keypress(function(e) {
            var ca = new Array(46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57);
            var c = !e.charCode ? e.which : e.charCode;
            if ($.inArray(c, ca) !== -1) {
            } else {
                e.preventDefault();
            }
        });
    });
</script>
<script type="text/javascript">
    function resetTableView() {
        $("table.admin-area-table tr.extracted").each(function() {
            if ($(this).attr("id")) {
                $(this).removeClass("extracted");
            } else {
                $(this).addClass("hidden");
                $(this).removeClass("extracted");
            }
        });
    }
</script>
